import React from 'react'
import './ChatRoomFooter.css'
import GiftIcon from "../../../../../../res/images/web/game-room/gift@2x.png";
import ConsumeIcon from "../../../../../../res/images/web/game-room/chongzhi@2x.png";
import gameSrc from "../../../../../../res/images/web/together/游戏盒子@2x.png"
import giftSrc from "../../../../../../res/images/web/together/礼物盒子@2x.png"

const ChatRoomFooter = props => {

    const {
        onPopUp,
        inputValue,
        onChatInputSubmit,
        onChatInputChange,
        inputDisabled,
        gameStatus
    } = props

    let status = gameStatus
    let gameOn = status > 1 && status < 8
    let gameNotStated = status === 1

    const button = <span
        onClick={(e) => onChatInputSubmit(e)}
    >
        发送
    </span>

    const input = <>
        <input
            type='search'
            placeholder={inputDisabled && gameNotStated ? '比赛未开始，暂不能聊天' : '跟大家聊聊呗～'}
            className='g-r-c-r-footer-input'
            value={inputValue}
            onChange={e => onChatInputChange(e)}
            onFocus={props.onInputFocus}
            onBlur={props.onInputBlur}
            disabled={inputDisabled}
            style={{
                width: inputDisabled ? '100%' : '',
                background: inputDisabled ? '#E4E4E4' : '',
            }}
        />
        {inputDisabled ? null : button}
    </>

    const gameNotStatedIcons = <>
        <div className='g-r-c-r-footer-icon' style={{ top: 10, left: '10%',}}>
            <img src={ConsumeIcon} onClick={() => onPopUp('consume')} alt='' style={{width: 28, height: 28,}}/>
            <p>充值</p>
        </div>

        <div className='g-r-c-r-footer-icon' style={{right: '10%', top: 10, }}>
            <img src={GiftIcon} onClick={() => onPopUp('gift')} alt='' style={{width: 28, height: 28,}}/>
            <p>礼物</p>
        </div>
    </>

    const gameOnIcons = <>
        <div className='g-r-c-r-footer-icon' onClick={() => onPopUp('game')}>
            <img src={gameSrc} alt=''/>
            <p>游戏</p>
        </div>
        <div className='g-r-c-r-footer-icon' style={{left: '50%'}}>
            <img src={giftSrc} alt='' onClick={() => onPopUp('gift')}/>
            <p>礼物</p>
        </div>
    </>


    const footer = (
        <div className='g-r-c-r-footer flex-space-between-align-center'>
            <div className='g-r-c-r-footer-input-c flex-space-between-align-center'>
                {input}
            </div>
            <div className='g-r-c-r-footer-icons' style={{height: gameNotStated ? '50px' : ''}}>
                {gameOn && gameOnIcons}
                {(gameNotStated || props.basketball) && gameNotStatedIcons}
            </div>
        </div>
    )

    return footer
}

export default ChatRoomFooter
